<template>
  <div class="process-list">
    <div class="search-bar">
      <span class="search-title">交付名称</span>
      <a-input
        v-model="searchParams.name"
        placeholder="请输入名称查询"
        style="width: 196px; margin-left: 24px"
        @keydown.enter="getList"
      ></a-input>
    </div>
    <div class="content">
      <div class="content-title">
        <div>
          <img
            src="@/assets/images/dashboard/dec@2x.png"
            class="title-img"
            alt=""
          />
          <span class="title-text">交付列表</span>
        </div>
        <div class="btns">
          <!--          <a-button-->
          <!--            type="primary"-->
          <!--            size="small"-->
          <!--            style="margin-left: 6px"-->
          <!--            @click="createDialogVisible = true"-->
          <!--            >添加流程模版</a-button-->
          <!--          >-->
        </div>
      </div>
      <div class="table-wrap">
        <a-table
          :data="projectList"
          stripe
          :scroll="{ x: '100%', y: '100%' }"
          :pagination="pageConfig"
          @page-change="pageChange"
          @page-size-change="pageSizeChange"
        >
          <template #columns>
            <a-table-column title="序号">
              <template #cell="{ rowIndex }">
                {{
                  (pageConfig.pageSize ? pageConfig.pageSize : 10) *
                    ((pageConfig.current ? pageConfig.current : 1) - 1) +
                  (rowIndex + 1)
                }}
              </template>
            </a-table-column>
            <a-table-column title="交付名称">
              <template #cell="{ record }">
                <span
                  style="color: blue; cursor: pointer"
                  @click="clickRow(record)"
                  >{{ record.name }}</span
                >
              </template>
            </a-table-column>
            <a-table-column title="里程碑" data-index="type"></a-table-column>
            <a-table-column title="流程模版" data-index="type"></a-table-column>
            <a-table-column title="流程ID" data-index="code"></a-table-column>
            <a-table-column title="流程状态" data-index="code"></a-table-column>
            <a-table-column
              title="创建人"
              data-index="creator"
            ></a-table-column>
            <a-table-column
              title="创建时间"
              data-index="createTime"
            ></a-table-column>
            <a-table-column
              title="完成时间"
              data-index="createTime"
            ></a-table-column>
            <a-table-column
              title="文件数"
              data-index="creator"
            ></a-table-column>
          </template>
        </a-table>
      </div>
    </div>
    <div class="components">
      <!--      <CreateProcess v-model:visible="createDialogVisible"></CreateProcess>-->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { PaginationProps } from '@arco-design/web-vue';
  import { getDeliveryList } from './api';
  // import CreateProcess from './create-process.vue';

  const searchParams = reactive({
    name: '',
  });

  const projectList = ref<object[]>([]);
  // for (let i = 0; i < 50; i += 1) {
  //   projectList.value.push({
  //     id: i,
  //     name: '测试项目',
  //     code: 111,
  //     type: '隧道',
  //     createTime: '2023-05-06',
  //     creator: 'chenming',
  //   });
  // }
  const pageConfig: PaginationProps = reactive({
    showTotal: true,
    showMore: true,
    showJumper: true,
    showPageSize: true,
    current: 1,
    pageSize: 10,
    total: 100,
  });

  const getList = () => {
    const params = {
      pageNo: pageConfig.current || 1,
      pageSize: pageConfig.pageSize || 10,
      paramExample: searchParams.name || '',
    };
    getDeliveryList(params)
      .then((res: any) => {
        if (res.code === 8000000) {
          projectList.value = res.data.list || [];
          pageConfig.total = res.data.total || projectList.value.length || 0;
        } else {
          projectList.value = [];
        }
      })
      .catch((e) => {
        if (e) {
          projectList.value = [];
        }
      });
  };
  const clickRow = (row: any) => {};
  const pageSizeChange = (size: number): void => {
    pageConfig.pageSize = size;
    getList();
  };
  const pageChange = (current: number): void => {
    pageConfig.current = current;
    getList();
  };

  const createDialogVisible = ref(false);

  const init = async () => {
    getList();
  };
  onMounted(() => {
    init();
  });
</script>

<style scoped lang="less">
  .process-list {
    height: calc(100vh - 150px);
    //border: 1px solid red;
  }
  .search-title {
    display: inline-block;
    width: 60px;
    height: 22px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN, serif;
    font-weight: 600;
    color: #000000;
    line-height: 22px;
  }
  .search-bar {
    //margin-top: 8px;
    padding-top: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
  }
  .content {
    margin-top: 24px;
    //height: calc(100% - 60px);
    height: 100%;
    .content-title {
      margin-top: 16px;
      //height: 25px;
      position: relative;
      //border: 1px solid red;
      .btns {
        position: absolute;
        right: 0;
        top: 0;
      }
      .title-img {
        height: 20px;
        width: 20px;
      }
      .title-text {
        display: inline-block;
        margin-left: 8px;
        font-size: 18px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN, serif;
        font-weight: 600;
        color: #1d2129;
        line-height: 21px;
        position: absolute;
        left: 20px;
        top: 0;
      }
    }
    .table-wrap {
      margin-top: 18px;
      height: calc(100% - 150px);
      //border: 1px solid red;
    }
  }
</style>
